<template>
<el-main>
<el-row style="background-color:#719CC6;color:white;height:50px;border-radius:30px;width:100%">
    <p style="color:white;margin-left:20px">香氛</p>
</el-row>
<el-row>
    <!-- 遍历list -->
    <el-col :span="4" v-for="good in list" :key="good.gid" :offset=1 style="padding-left:50px">
        <!-- 页面跳转时，通过查询字符串来传递商品的id -->
      <router-link :to="'/detail?id='+good.gid" style="text-decoration:none;">
        <el-card :body-style="{ padding: '0px'}" style="height:400px;width:350px;" v-if="good.cid==1">
        <img :src="'http://127.0.0.1:3001/images/'+good.img" class="image" style="height:260px;width:100%;"/>
        <div style="text-align:center;font-size:20px" >
          <span style="display:inline-block;">{{good.name}}</span>
          <div>
            <span class="time" style="display:block;color:red;font-size:25px">￥{{ good.price }}</span>
            <el-button type="text" class="button" style="font-size:20px">加入购物车</el-button>
          </div>
        </div>
        </el-card>
      </router-link>
    </el-col>
</el-row>
<br>
<el-row style="background-color:#719CC6;color:white;height:50px;border-radius:30px;width:100%">
    <p style="color:white;margin-left:20px">面霜</p>
</el-row>
<el-row>
    <!-- 遍历list -->
    <el-col :span="4" v-for="good in list" :key="good.gid" :offset=1 style="padding-left:50px">
        <!-- 页面跳转时，通过查询字符串来传递商品的id -->
      <router-link :to="'/detail?id='+good.gid" style="text-decoration:none;">
        <el-card :body-style="{ padding: '0px'}" style="height:400px;width:350px;" v-if="good.cid==2">
        <img :src="'http://127.0.0.1:3001/images/'+good.img" class="image" style="height:260px;width:100%;"/>
        <div style="text-align:center;font-size:20px" >
          <span style="display:inline-block;">{{good.name}}</span>
          <div>
            <span class="time" style="display:block;color:red;font-size:25px">￥{{ good.price }}</span>
            <el-button type="text" class="button" style="font-size:20px">加入购物车</el-button>
          </div>
        </div>
        </el-card>
      </router-link>
    </el-col>
</el-row>
<br>
<el-row style="background-color:#719CC6;color:white;height:50px;border-radius:30px;width:100%">
    <p style="color:white;margin-left:20px">爽肤水</p>
</el-row>
<el-row>
    <!-- 遍历list -->
    <el-col :span="4" v-for="good in list" :key="good.gid" :offset=1 style="padding-left:50px">
        <!-- 页面跳转时，通过查询字符串来传递商品的id -->
      <router-link :to="'/detail?id='+good.gid" style="text-decoration:none;">
        <el-card :body-style="{ padding: '0px'}" style="height:400px;width:350px;" v-if="good.cid==3">
        <img :src="'http://127.0.0.1:3001/images/'+good.img" class="image" style="height:260px;width:100%;"/>
        <div style="text-align:center;font-size:20px" >
          <span style="display:inline-block;">{{good.name}}</span>
          <div>
            <span class="time" style="display:block;color:red;font-size:25px">￥{{ good.price }}</span>
            <el-button type="text" class="button" style="font-size:20px">加入购物车</el-button>
          </div>
        </div>
        </el-card>
      </router-link>
    </el-col>
</el-row>
<br>
<el-row style="background-color:#719CC6;color:white;height:50px;border-radius:30px;width:100%">
    <p style="color:white;margin-left:20px">彩妆</p>
</el-row>
<el-row>
    <!-- 遍历list -->
    <el-col :span="4" v-for="good in list" :key="good.gid" :offset=1 style="padding-left:50px">
        <!-- 页面跳转时，通过查询字符串来传递商品的id -->
      <router-link :to="'/detail?id='+good.gid" style="text-decoration:none;">
        <el-card :body-style="{ padding: '0px'}" style="height:400px;width:350px;" v-if="good.cid==4">
        <img :src="'http://127.0.0.1:3001/images/'+good.img" class="image" style="height:260px;width:100%;"/>
        <div style="text-align:center;font-size:20px" >
          <span style="display:inline-block;">{{good.name}}</span>
          <div>
            <span class="time" style="display:block;color:red;font-size:25px">￥{{ good.price }}</span>
            <el-button type="text" class="button" style="font-size:20px">加入购物车</el-button>
          </div>
        </div>
        </el-card>
      </router-link>
    </el-col>
</el-row>
</el-main>
</template>

<script>
export default {
  props:{//props对象，用于父子组件间传递数据
        //自定义名为cids的属性，用来接收父组件传过来的数据
        cids:{
            type:Array, //指定cid的数据类型
            default:()=>[1,2,3,4] //指定cid的值
        }
    },
  data(){
    return{
      list:[]
    }
  },
  created(){
     this.fetchGoods(); //调用fetchGoods方法来初始化数据。
  },
  methods:{
     async fetchGoods() { //遍历cids数组，为每个cid发送一个请求，并使用Promise.all来等待所有请求完成。
      const promises = this.cids.map(cid => { //map()遍历数组，形成新数组。我不希望一个请求的失败阻止其他请求的完成，所以在map函数内部处理每个请求的错误，而不是在Promise.all的catch块中处理
        return this.axios.post('/api/goods/goodsByCate', { cid }).then(res => { //处理异步操作成功时的回调函数
          return res.data.data;
        });
      });
      try {
        const results = await Promise.all(promises); //Promise.all()方法来处理多个异步操作
        this.list = [].concat(...results); //所有请求的响应结果都被合并成一个数组，并赋值给this.list; ...(扩展运算符)，将 results 中的每个子数组展开成单独的参数传递给 concat()，从而实现数组合并。
      } catch (err) {
        alert(err.message);
      }
    }
  }

  }

</script>

<style>

</style>